<template>
    <el-dialog :close-on-click-modal="false" title="添加训练任务" :visible.sync="dialogVisible" @close="triggerDialog"><!--append-to-body :modal-append-to-body="true" -->
        <el-form size="mini" :model="form" :rules="rules" label-width="80px" ref="flow_add_form">
            <el-form-item label="名称" prop="description"><!--:label-width="formLabelWidth"-->
                <el-input v-model="form.description" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="类型" prop="systemSelection" >
                <el-select v-model="form.systemSelection" prop="systemSelection" filterable placeholder="请选择">
                    <el-option
                            v-for="item in systemOptions"
                            :key="item.value"
                            :label="item.value"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="描述" prop="description"><!--:label-width="formLabelWidth"-->
                <el-input v-model="form.description" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="参数1" prop="description"><!--:label-width="formLabelWidth"-->
                <el-input v-model="form.description" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="参数2" prop="description"><!--:label-width="formLabelWidth"-->
                <el-input v-model="form.description" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="参数3" prop="description"><!--:label-width="formLabelWidth"-->
                <el-input v-model="form.description" auto-complete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="triggerDialog">取 消</el-button>
            <el-button type="primary" @click="addSave">确 定</el-button>
            <el-button type="success" @click="addSave">立即执行</el-button>
        </div>
    </el-dialog>
</template>

<script>
    // import {systemList,featureConfList,addFlow,editFlow} from "../../../api/resource_manage"
    export default {
        name: "feature_add",
        props:["dialogVisible"],
        watch:{

        },
        data() {
            return {
                form:{
                    featureSelection: '',
                    systemSelection: "",
                    description: "",
                },
                rules:{
                    description: [
                        { required: true, message: '请输入描述信息', trigger: 'change' }
                    ],
                    systemSelection: [
                        {required: true, message: '请选择', trigger: 'change' }
                    ],
                    featureSelection: [
                        {required: true, message: '请选择', trigger: 'change' }
                    ]
                },
                props:{
                    label: 'name',
                    children: 'zones'
                },
                dialogVisible: this.dialogVisible,
                isEdit: false,
                editId: -1,

                systemOptions: [{
                    value: '分类',
                    label: '分类'
                }, {
                    value: '分割',
                    label: '分割'
                }, {
                    value: '检测',
                    label: '检测'
                }],
                featureOptions: [],
            }
        },
        methods:{
            handleCheckChange(data, checked, indeterminate) {

            },
            handleNodeClick(data) {

            },
            loadNode(node, resolve) {
                if (node.level === 0) {
                    return resolve([{ name: 'region1' }, { name: 'region2' }]);
                }
                if (node.level > 3) return resolve([]);

                var hasChild;
                if (node.data.name === 'region1') {
                    hasChild = true;
                } else if (node.data.name === 'region2') {
                    hasChild = false;
                } else {
                    hasChild = Math.random() > 0.5;
                }

                setTimeout(() => {
                    var data;
                    if (hasChild) {
                        data = [{
                            name: 'zone' + this.count++
                        }, {
                            name: 'zone' + this.count++
                        }];
                    } else {
                        data = [];
                    }

                    resolve(data);
                }, 500);
            },
            triggerDialog(){
                this.$reset("flow_add_form")
                this.$emit("close")
            },
            addSave(){
                this.$refs.flow_add_form.validate((valid) => {
                    if ((valid)) {
                        if(this.isEdit){
                            editFlow({
                                id:this.editId,systemId:this.form.systemSelection,description:this.form.description,path:this.form.featureSelection
                            }).then(res=>{
                                this.$parent.updateTable()
                            })
                        }else{
                            addFlow({
                                systemId:this.form.systemSelection,description:this.form.description,path:this.form.featureSelection
                            }).then(res => {
                                this.$parent.updateTable()
                            })
                        }
                        this.$emit("close")
                    }else{
                        this.$message("error submit")
                    }
                })

            },
            updateDropdown(){
                systemList({}).then(res=>{
                    this.systemOptions=res.data.data;
                })
                featureConfList({}).then(res=>{
                    this.featureOptions=res.data.data;
                })
            }
        },
        mounted() {
            this.updateDropdown()
        }
    }
</script>

<style scoped>
    .el-select {
        display: block;
    }
</style>